<style scoped>
.icon {
  cursor: pointer;
  font-size: 24px;
  margin: 0 4px;
}
.icon:hover {
  color: #409eff;
}
.displayNo {
  color: #888888;
  cursor: not-allowed;
  opacity: 0.5;
}
.displayNo:hover {
  color: #888888;
}
</style>
<!--  -->
<template>
  <div class="noselect">
    <i :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow499':true, 'displayNo':isUp}" @click='clickUp'></i>
    <i :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow505':true, 'displayNo':isDown}" @click='clickDown'></i>
    <i :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow506':true, 'displayNo':isLeft}" @click='clickLeft'></i>
    <i :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow484':true, 'displayNo':isRight}"
      @click='clickRight'></i>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    updateDataOrder: {
      type: Function
    },
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
    }
  },
  computed: {
    // 过滤数据
    // list () {
    //   let list = []
    //   for (let i in this.data) {
    //     list.push({
    //       id: this.data[i].id,
    //       parentId: this.data[i].parentId,
    //       orderNum: this.data[i].orderNum,
    //       type: this.data[i].type
    //     })
    //   }
    //   return list
    // },
    isUp () {
      // 是否是这个组里面的第一个
      if (this.group.length > 0) {
        if (this.group[0].id === this.id) {
          return true
        }
      }
      return false
    },
    isDown () {
      // 是否是这个组里面的最后一个
      if (this.group.length > 0) {
        if (this.group[this.group.length - 1].id === this.id) {
          return true
        }
      }
      return false
    },
    isLeft () {
      if (this.index === 0) {
        return true
      }
      return false
    },
    isRight () {
      // 如果是最顶部的则返回 true
      if (this.isUp) {
        return true
      }
      // 是否是最后一级
      if (this.lastLevel) {
        return true
      }
      // 是否有子级在最后一级
      if (this.hasChildrenLastLevel) {
        return true
      }
      if (this.prePage.type === 2) {
        return true
      }
      // 是否前一个是系统页

      return false
    },
    /**
     * 获取同级别组
     */
    group () {
      let parentId = this.page.parentId
      let group = []
      let data = this.list
      for (let i in data) {
        if (data[i].parentId === parentId) {
          group.push(data[i])
        }
      }
      return group
    },
    /**
     * 获取父级组
     */
    parentGroup () {
      if (!this.parent) {
        return []
      }
      let parentId = this.parent.parentId
      let parentGroup = []
      let data = this.list
      for (let i in data) {
        if (data[i].parentId === parentId) {
          parentGroup.push(data[i])
        }
      }
      return parentGroup
    },
    /**
     * 获取子级组
     */
    childrenGroup () {
      let id = this.page.id
      let childrenGroup = []
      let data = this.list
      for (let i in data) {
        if (data[i].parentId === id) {
          childrenGroup.push(data[i])
        }
      }
      return childrenGroup
    },
    /**
     * 是否是最后一级
     */
    lastLevel () {
      if (this.index === 2) {
        return true
      }
      return false
    },
    /**
     * 是否有子级在最后一级
     * 如果 index 0
     * 如果 存在子子级则返回true
     * 如果 index 1
     * 如果 存在子级则返回true
     * 如果 index 2
     * 直接返回 true
     */
    hasChildrenLastLevel () {
      // index, id, data
      if (this.lastLevel) {
        return true
      }
      if (this.index === 1) {
        if (this.childrenGroup && this.childrenGroup.length > 0) {
          return true
        }
      }
      if (this.index === 0) {
        if (this.childrenGroup && this.childrenGroup.length > 0) {
          for (let i in this.childrenGroup) {
            let temp = this.childrenGroup[i]
            let id = temp.id
            let data = this.list
            for (let i in data) {
              if (data[i].parentId === id) {
                return true
              }
            }
          }
        }
      }
      return false
    },
    /**
     * 获取 index 级别
     */
    index () {
      let index = 0
      if (this.parent) {
        index = 1
      }
      if (this.grandfather) {
        index = 2
      }
      return index
    },
    /**
     * 获取当前 page
     */
    page () {
      let page
      let data = this.list
      for (let i in data) {
        if (data[i].id === this.id) {
          page = data[i]
        }
      }
      return page
    },
    /**
     * 获取当前page同级前一个page
     */
    prePage () {
      let prePage
      let data = this.group
      for (let i in data) {
        if (data[i].id === this.id) {
          prePage = data[i - 1]
        }
      }
      return prePage
    },
    /**
     * 获取父级
     */
    parent () {
      if (this.page.parentId === 0) {
        return null
      }
      let parent = null
      let parentId = this.page.parentId
      let data = this.list
      for (let i in data) {
        if (data[i].id === parentId) {
          parent = data[i]
        }
      }
      return parent
    },
    /**
     * 获取祖父级
     */
    grandfather () {
      let parent = this.parent
      if (!parent || parent.parentId === 0) {
        return null
      }
      let grandfather = null
      let data = this.list
      for (let i in data) {
        if (data[i].id === parent.parentId) {
          grandfather = data[i]
        }
      }
      return grandfather
    }
  },
  methods: {
    clickUp () {
      if (this.isUp) {
        return
      }
      let update = []
      let key = 0
      let time = 0
      for (let i in this.group) {
        time++
        let page = this.group[i]
        page.orderNum = time
        if (this.page.id === page.id) {
          key = time - 1
        }
        update.push(page)
      }

      let orderNum = update[key - 1].orderNum
      update[key - 1].orderNum = update[key].orderNum
      update[key].orderNum = orderNum
      this.updateDataOrder(update, this.id)
    },
    clickDown () {
      if (this.isDown) {
        return
      }
      let update = []
      let key = 0
      let time = 0
      for (let i in this.group) {
        time++
        let page = this.group[i]
        page.orderNum = time
        if (this.page.id === page.id) {
          key = time - 1
        }
        update.push(page)
      }

      let orderNum = update[key + 1].orderNum
      update[key + 1].orderNum = update[key].orderNum
      update[key].orderNum = orderNum
      this.updateDataOrder(update, this.id)
    },
    clickLeft () {
      if (this.isLeft) {
        return
      }
      // 收先获取本组的排序
      let update = []
      let time = 0
      for (let i in this.group) {
        let page = this.group[i]
        if (this.page.id === page.id) {
          continue
        }
        time++
        page.orderNum = time
        update.push(page)
      }
      // 获取父级组
      time = 0
      for (let i in this.parentGroup) {
        let page = this.parentGroup[i]
        time++
        page.orderNum = time
        update.push(page)
        if (this.page.parentId === page.id) {
          let _page = JSON.parse(JSON.stringify(this.page))
          time++
          _page.orderNum = time
          _page.parentId = page.parentId
          update.push(_page)
        }
      }

      this.updateDataOrder(update, this.id)
    },
    clickRight () {
      if (this.isRight) {
        return
      }
      // 收先获取本组的排序
      let update = []
      let children
      let time = 0
      for (let i in this.group) {
        let page = this.group[i]
        if (this.page.id === page.id) {
          children = this.group[i - 1]
          continue
        }
        time++
        page.orderNum = time
        update.push(page)
      }

      // 父id为 children.id 的子组
      time = 0
      for (let i in this.list) {
        let page = this.list[i]
        if (page.parentId === children.id) {
          time++
          page.orderNum = time
          update.push(page)
        }
      }
      let _page = JSON.parse(JSON.stringify(this.page))
      time++
      _page.orderNum = time
      _page.parentId = children.id
      update.push(_page)
      this.updateDataOrder(update, this.id)
    }
  }
}

</script>
